<template>
	<div>
		<el-input id="ss" v-model="city" class="input-with-select  " @keyup.native.enter="getTq"></el-input>
		<el-button class="wz" type="text" @click="changeCity('北京')">北京</el-button>
		<el-button class="wz" type="text" @click="changeCity('济南')">济南</el-button>
		<el-button class="wz" type="text" @click="changeCity('上海')">上海</el-button>
		<el-button class="wz" type="text" @click="changeCity('深圳')">深圳</el-button>
		<ul class="list">
			<li>
				<h3>当前地区：{{ city }}</h3>
			</li>
			<li v-for="(item, key) in weatherList" :key="key">
				日期：{{ item.date }}
				<br />
				风力：{{ item.fengli }}
				<br />
				风向：{{ item.fengxiang }}
				<br />
				最高温：{{ item.high }}
				<br />
				最低温：{{ item.low }}
				<br />
				天气：{{ item.type }}
				<br />
				<img :src="
				item.type == '晴'
				?qin:item.type == '多云'
				?duoyun:item.type=='中雨'
				?zhongyu:item.type=='小雪'
				?xiaoxue:qing
				" />
				

			</li>
		</ul>
	</div>
</template>

<script>
import request from '../../utils/request.js';
export default {
	name: 'weather',
	data() {
		return {
			weatherList: [],
			city: '济南',
			apiURL:process.env.VUE_APP_BASE_WEATHER_TARGET,
			qin:require('@/images/weather/qin.png'),
			duoyun: require('@/images/weather/duoyun.png'),
			xiaoxue: require('@/images/weather/xiaoxue.png'),
			zhongyu: require('@/images/weather/zhongyu.png')
		};
	},
	created() {
		this.getTq();
	},
	methods: {
		getTq() {
			var that = this;
			request({
				url: that.apiURL+"/weather_mini",
				methods: 'get',
				params: { city: that.city }
			}).then(function(res) {
				that.weatherList = res.data.data.forecast;
				console.log(that.weatherList);
			});
		},
		changeCity(cityName) {
			this.city = cityName;
			this.getTq();
		}
	}
};
</script>

<style scoped="scoped">
.list {
	list-style: none;
}
.list li {
	text-align: left;
	border-bottom: 1px dotted #13ce66;
	line-height: 30px;
	margin-bottom: 20px;
}
#ss {
	margin-top: 10px;
}
</style>
